<template>
  <div>
    <div>
      <el-row style="margin-bottom: 5px">
        <div style="display: flex">
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100px;
              height: 30px;
              color: grey;
              margin-left: 5px;
            "
          >
            轮播图预览
          </div>
          <div class="addCarousel" @click="handleAdd">添加轮播图</div>
        </div>
      </el-row>
      <el-carousel
        :interval="4000"
        height="400px"
        style="background-color: #efefef; border-radius: 10px"
      >
        <el-carousel-item
          v-for="(item, index) in carouselList"
          :key="index"
          style="height: 100%"
        >
          <el-image
            class="elimage"
            @click="toCarouselUrl(item.url)"
            style="width: 100%; height: 100%"
            :src="item.img"
            fit="fill"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
      <!-- 预览结束 -->
      <!--  -->
    </div>
    <!--  -->
    <!-- 展示轮播图列表开始 -->
    <div class="carousel-container">
      <div
        v-for="(item, index) in carouselList"
        :key="index"
        class="carousel-item"
      >
        <div>
          <el-button
            type="text"
            style="margin-left: 290px; font-size: 13px"
            @click="handleEdit(item.id)"
            >编辑</el-button
          >
          &nbsp;
          <el-popconfirm
            title="确认删除？"
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            @confirm="handleDelete(item.id)"
          >
            <el-button slot="reference" type="text" style="color: red"
              >删除</el-button
            >
          </el-popconfirm>
        </div>

        <!-- <div
          style="width: 95%; margin: 0px auto; border-bottom: 1px solid grey"
        ></div> -->
        <el-image
          style="width: 350px; height: auto; padding: 0 10px 10px"
          :src="item.img"
          fit="contain"
        ></el-image>
        <div
          style="width: 95%; margin: 0px auto; border-bottom: 1px solid grey"
        ></div>
        <div style="margin-left: 10px; color: grey; font-size: 13px">
          <span>图片链接地址:&nbsp;{{ item.url }}</span>
        </div>
      </div>
    </div>
    <!-- 展示轮播图列表开始 -->

    <!-- 添加或者编辑轮播图的dialog -->
    <el-dialog
      title="轮播图信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="4"><div style="line-height: 30px">链接地址</div></el-col>
        <el-col :span="16"><el-input v-model="carousel.url"></el-input></el-col>
      </el-row>
      <br /><br /><br />
      <el-row>
        <el-col :span="4">上传图片</el-col>
        <el-col :span="20">
          <div style="display: flex">
            <el-image
              v-if="carousel.img == undefined ? false : true"
              style="width: 100px; height: 100px"
              :src="carousel.img"
              fit="contain"
            ></el-image>
            <el-upload
              class="avatar-uploader"
              :action="loadUrl"
              :show-file-list="false"
              :on-success="handleCarouselSuccess"
              :before-upload="beforeCarouselUpload"
            >
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-col>
      </el-row>
      <br /><br />
      <el-button style="margin-left: 160px" @click="handleSaveCarousel"
        >保存</el-button
      >
    </el-dialog>
  </div>
</template>
<script>
import { getCarousel, deleteCarousel, saveCarousel,getCarouselOne } from "../api/carouselMG";
export default {
  name: "CarouselView",
  data() {
    return {
      dialogVisible: false,
      carouselList: [],
      loadUrl: "http://localhost:8088/loadImg/carousel",
      carousel: {},
    };
  },
  methods: {
    async handleEdit(id){
      // 点击编辑轮播图
      await getCarouselOne(id).then(res=>{
        if (res.data.code == 200) {
          this.carousel=res.data.data;
          this.dialogVisible=true
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        }
      })
    },
    async handleSaveCarousel() {
      //点击保存轮播图的事件
      await saveCarousel(this.carousel).then((res) => {
        if (res.data.code == 200) {
          this.getCarouselList();
          this.carousel={};
          this.dialogVisible=false
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },
    handleAdd() {
      //点击添加轮播图显示dialog
      this.dialogVisible = true;
    },
    async handleDelete(id) {
      //删除轮播图
      //   console.log(id);
      await deleteCarousel(id).then((res) => {
        if (res.data.code == 200) {
          this.getCarouselList();
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },
    async getCarouselList() {
      // 获取轮播图的信息
      await getCarousel().then((res) => {
        if (res.data.code == 200) {
          this.carouselList = res.data.data;
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
    handleClose(done) {
      //关闭dialog
      this.carousel = {};
      done();
    },
    toCarouselUrl(url) {
      //点击轮播图的图片跳转到那个网页
      // 确保url是一个完整的URL，包括协议部分
      if (!/^https?:\/\//.test(url)) {
        url = "https://" + url; // 如果url不是以http或https开头，则默认为http
      }
      // 点击轮播图的图片跳转到那个网页
      window.open(url, "_blank");
    },
    beforeCarouselUpload(file) {
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      // const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPEG && !isJPG && !isPNG) {
        this.$message.error("上传的轮播图只能是 JPG/PNG 格式!");
        return false;
      }
      if (file.size > 9 * 1024 * 1024) {
        this.$message.error("上传的轮播图大小不能超过 9MB!");
        return false;
      }
      return true;
    },
    handleCarouselSuccess(res, file, fileList) {
      //上传图片组建的默认返回参数
      // 假设服务器返回的数据中包含图片的 URL
      if (res.code == 200) {
        this.$set(this.carousel, "img", res.data);
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.code + "::" + res.msg);
      }
      console.log(file, fileList);
    },
  },
  mounted() {
    this.getCarouselList();
  },
};
</script>
<style lang="scss" scoped>
// -----------------------------------------
.elimage:hover {
  //轮播图鼠标移入这个鼠标的icon变成一个手指着的icon
  cursor: pointer;
}
.addCarousel {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 30px;
  margin-left: 970px;
  color: #ffa340;
  //   设置边框圆角
  border-radius: 15px;
}
.addCarousel:hover {
  background: #ffa340;
  color: #fff;
  cursor: pointer;
}

// 图片列表的样式，一行3个
.carousel-container {
  display: flex;
  flex-wrap: wrap;
  margin-left: 7px;
}

.carousel-item {
  margin: 4px; /* 添加一些外边距以防止图片紧贴在一起 */
  border: 1px solid grey;
  padding-bottom: 10px;
}

//  这里设置的是dialog里面的样式
.avatar-uploader {
  width: 100px;
  border: 2px dashed #a09f9f;
  border-radius: 6px;
  cursor: pointer;
}
.avatar-uploader:hover {
  border-color: #06a4ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
</style>